import * as React from 'react'
import { NavBar, Icon, Button, FlatList } from 'components'
import './index.less'
import { post, NotBean } from '../../../../utils'

export default class Address extends React.Component<any, any> {

    public render(): JSX.Element {
        const { addressData, SET_NEW_ADDRESS } = this.props
        return (
            <div className={`myAddress ${(addressData.length > 0) ? 'myAddress_white' : ''}`}>
                <NavBar
                    title={<div style={{ fontSize: '0.97rem', color: '#222' }}>地址管理</div>}
                    fixed={true}
                />
                <div className="myAddress_content">
                    <FlatList
                        data={addressData}
                        ListEmptyComponent={NotBean}
                        renderItem={(item: any, index: number) => {
                            return (
                                <div className={`myAddress_item_content ${(item.isShowDefautl) ? 'defaultAddress' : ''}`} key={index}>
                                    {(item.status === 1) && <Icon type="tick_circle" className="myAddress_item_content_selectIcon" />}
                                    <div onClick={() => { this.handleSelectAddress(item) }}>
                                        <div className="myAddress_item_content_userInfo">
                                            <div className="myAddress_item_content_userInfo_userName">{item.name}</div>
                                            <div className="myAddress_item_content_userInfo_userPhone DINPro">{item.tel}</div>
                                        </div>
                                        <div className="myAddress_item_content_userAddress">
                                            <div className="myAddress_item_content_userAddress_address">
                                                {item.province}{item.city}{item.area}{item.address}
                                            </div>
                                        </div>
                                    </div>
                                    <Icon
                                        onClick={this.handleSelect.bind(this, item)}
                                        type="edit_pan"
                                        className="myAddress_item_content_editIcon"
                                    />
                                </div>
                            )
                        }}
                    />
                </div>
                <div className={`myAddress_operation ${(addressData.length > 0) ? 'myAddress_white' : ''}`}>
                    <Button className="myAddress_operation_btn" onClick={() => { SET_NEW_ADDRESS({}); this.goToUrl('/My/newAddress') }}>
                        <Icon type="plus" />新建收货地址
                    </Button>
                </div>
            </div>
        )
    }

    public componentDidMount() {
        this.getData()
    }

    private getData = () => {
        const { userInfo, SET_DETAIL_ADDRESS } = this.props
        post('usersapi/userAddress', {
            userId: userInfo.id
        }).then((data: any) => {
            SET_DETAIL_ADDRESS(data)
        })
    }

    private handleSelect(item: any) {
        const { SET_NEW_ADDRESS } = this.props
        if (item.status === 1) {
            item.status = true
        } else {
            item.status = false
        }
        SET_NEW_ADDRESS(item)
        this.goToUrl('/My/newAddress')
    }
    // private handleOpenClose = (i: number, status: boolean) => {
    //     const data = [...this.state.addressData]
    //     data[i].isShowDefautl = status
    //     data[i].isShowEdit = status
    //     this.setState({
    //         addressData: data
    //     })
    // }
    // private handleDeleteAddress = () => {
    //     console.log(1)
    // }

    private handleSelectAddress = (item: any) => {
        const { match, SET_USER_DEFAULT_ADDRESS, history } = this.props
        if (match.params.type === '3') {
            SET_USER_DEFAULT_ADDRESS(item)
            history.goBack()
        }
    }
    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }
}